<template>
  <div class="home">
    <!-- 标题开始 -->
      <div class="title">易洁家政</div>
    <!-- 标题结束 -->
    <!-- 轮播图开始 -->
      <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in carousels" :key="item.id">
              <img width="100%" height="160px" :src="item.url" alt="">
            </van-swipe-item>
        </van-swipe> 
    <!-- 轮播图结束 -->
      </div>
    <!-- 栏目信息开始 -->
      <div class="category">
        <van-grid :column-num="6">
          <van-grid-item @click=toHandler(index,item.id) v-for="(item,index) in categorys" :key="index" :icon="item.icon" :text="item.name" />
        </van-grid>
      </div>
    <!-- 栏目信息结束 -->
    <!-- 展示信息开始 -->
    <van-grid :column-num="2">
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
    </van-grid>
    <!-- 展示信息结束 -->

  </div>
</template>

<script>
//引入axios
import {get} from '@/http/axios.js'
export default {
    data() {
      return {
        carousels:[],
        list:{
          page:1,
          pageSize:6
        },
        categorys:[]
      }
    },
    methods:{
      //查询所有轮播图信息
      findAllCarousel(){
        //异步操作
          get('/carousel/findAll').then(res=>{
            //将从后台拿到的轮播图信息存储到carousel
            this.carousels = res.data.data
          })
      },
      //查询所有分类信息
      findAllCategory(){
          get('/productCategory/pageQuery',this.list).then(res=>{
            this.categorys = res.data.data.list
            
          })
      },
      //点击跳转
      toHandler(index,id){
        this.$router.push({ path:'/manager/productList',query:{index,id}})
      }
    },
    created() {
      this.findAllCarousel()
      this.findAllCategory()
    }
}
</script>

<style scoped>
.home {
  height:1135px;
}
.home .title {
  height: 130px;
  background-image: linear-gradient(90deg,#7579ff,#bf73ff);
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  font-size: 29px;
  font-family: webfont;
  color: #fff;
  text-align: center;
  padding-top: 5px;
}
.home .swipe{
  width: 90%;
  height: 160px;
  position: absolute;
  top: 136px;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 10px 0 #aaa;
  border-radius: 8px;
}
.home .swipe img{
  border-radius: 8px;
}
.home .category{
  margin-top:100px;
}

</style>